<template>
  <div class="container">
    <el-form label-width="100px">
      <el-row :gutter="20">
        <el-col :lg="8" :xl="4">
          <el-form-item label="名称">
            <el-input
              type="text"
              v-model="queryParam.searchText"
              placeholder="请输入名称"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="8" :xl="6">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button
            type="success"
            @click="addUser"
            v-if="$util.btnShowAuthority('/systemRole/createRole')"
            >新增角色</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        style="width: 100%"
      >
        <el-table-column label="名称" align="center" prop="roleName">
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          prop="roleStatus"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ changeStatus(scope.row.roleStatus) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-tooltip
              content="修改账户"
              placement="top"
              v-if="$util.btnShowAuthority('/systemRole/updateRole')"
            >
              <i class="el-icon-edit" @click="editAccountHandle(scope.row)"></i>
            </el-tooltip>
            <!--            <span style="margin: 0 10px;position:relative;top: -1px;color:#ccc"-->
            <!--              >|</span-->
            <!--            >-->
            <!--            <el-tooltip content="删除" placement="top">-->
            <!--              <i class="el-icon-delete" @click="deleteAccount(scope.row)"></i>-->
            <!--            </el-tooltip>-->
            <span
              style="margin: 0 10px;position:relative;top: -1px;color:#ccc"
              v-if="$util.btnShowAuthority('/systemRole/grantMenu')"
              >|</span
            >
            <el-tooltip
              content="权限绑定"
              placement="top"
              v-if="$util.btnShowAuthority('/systemRole/grantMenu')"
            >
              <i
                class="el-icon-plus"
                @click="bindingPermissions(scope.row)"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :current-page="queryParam.pageNumber"
          :page-size="queryParam.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pageTotal"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <EditRoles
      :isShow="addShow"
      @closeModel="handleClose"
      :checkName="checkName"
      :checkContent="checkContent"
      :type="control"
      :id="rolesId"
      ref="changeOperate"
    >
    </EditRoles>

    <BindingPermissions
      :isShow="permissionsShow"
      :id="permissionId"
      @closeModel="handleClose"
    ></BindingPermissions>
  </div>
</template>
<script>
import serve from "@/api/jurisdiction";
import EditRoles from "./compoents/EditRoles";
import BindingPermissions from "./compoents/BindingPermissions";

export default {
  name: "Roles",
  components: {
    EditRoles,
    BindingPermissions
  },
  data() {
    return {
      permissionId: "",
      permissionsShow: false,
      rolesId: "",
      control: "",
      checkName: "",
      checkContent: "",
      addShow: false,
      tableData: [],
      queryParam: {
        searchText: "",
        pageNumber: 1,
        pageSize: 10
      },
      pageTotal: 0
    };
  },
  created() {
    this.getList();
  },
  methods: {
    bindingPermissions(row) {
      this.permissionId = row.id + "";
      this.permissionsShow = true;
    },
    // 删除账户
    deleteAccount(val) {
      this.$confirm("此角色将删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        serve.roleApiDeleteServe(val.id).then(res => {
          if (res.code === 200) {
            this.getList();
            this.$message.success("删除成功");
          } else {
            this.$message.error(res.errorMsg);
          }
        });
      });
    },
    handleClose() {
      this.addShow = false;
      this.permissionsShow = false;
      this.getList();
    },
    // 添加用戶
    addUser() {
      this.control = "1";
      this.addShow = true;
    },
    // 获取列表
    getList() {
      serve
        .getPageRoleList(this.queryParam)
        .then(res => {
          if (res.code === 200) {
            this.tableData = res.data;
            this.pageTotal = res.data && res.data.length;
          }
        })
        .catch(err => this.$message.error(err))
        .finally(() => {});
    },
    // 修改账户
    editAccountHandle(scope) {
      this.checkName = scope.roleName;
      this.checkContent = scope.comment;
      this.rolesId = scope.id + "";
      this.control = "2";
      this.addShow = true;
    },
    // 列表角色状态解析
    changeStatus(val) {
      switch (val) {
        case "NORMAL":
          return "正常";
        case false:
          return "禁用";
        default:
          break;
      }
    },
    // 查询按钮
    search() {
      this.queryParam.pageNumber = 1;
      this.getList();
    },
    // 分页切换
    handlePageChange(val) {
      this.queryParam.pageNumber = val;
      this.getList();
    },
    // 分页切换
    handleSizeChange(val) {
      this.queryParam.pageSize = val;
      this.getList();
    }
  }
};
</script>
<style scoped>
#container .el-table th.gutter {
  display: table-cell !important;
}
</style>
